<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
        <link href="../../css/header.css" rel="stylesheet" />
        
        <style>
            .mui-content{
                width: 100%;
                position: absolute;
                top: 2.625rem;
                bottom: 0rem;
                background: #2e3132;
            }
        </style>
        
	</head>

	<body>
        
        <header class="mui-bar mui-bar-nav title">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
            <a id="qrcode_download" class="mui-pull-right" style="font-size: 15px;color: white;line-height: 3.75rem;">
            	<img src="../../images/download.png" width="25px"/>
            </a>
            <h1 class="mui-title title-color">我的二维码</h1>
        </header>
        
        <div class="mui-content" style="padding: 5rem 1.875rem 0rem 1.875rem;">
            <div style="background-color: #fff;padding-top: 1.25rem;">
                <img id="my_face" src="" width="60px" style="border-radius: 50%;float: left;margin-left: 0.625rem;"/>
                <label id="my_nickname" style="float: left; margin-left: 0.625rem;margin-top: 1.25rem;">tt</label>
            </div>
            <div style="background-color: #fff;text-align: center;">
                <img id="my_qrcode" src="" />
            </div>
            <div style="background-color: #fff;text-align: center;">
                <p style="padding-bottom: 0.625rem;font-size: 0.75rem;">
                    扫一扫二维码，加我好友
                </p>
            </div>
        </div>
        
		<script src="../../js/mui.js"></script>
        <script src="../../js/app.js"></script>
		<script type="text/javascript">
			mui.init()
            
            mui.plusReady(function () {
               // 获取账号信息
               var user = app.getUserGlobalInfo();
               
               // 设置对应的信息
               let my_face_image = document.getElementById("my_face");
               let span_nickname = document.getElementById("my_nickname");
               let qrcode = document.getElementById("my_qrcode");
               span_nickname.innerText = user.nickname;
               qrcode.src = user.qrcode;
               // 获取手机端的可见屏幕的宽度
               var clientWidth = document.body.clientWidth - 60;
               qrcode.width = clientWidth;
               qrcode.height = clientWidth;
               // 如果头像存在则设置，不存在就用默认的
               if (app.isNotNull(user.faceImage)){
                   my_face_image.src = user.faceImage;
               } else {
                   my_face_image.src = app.defaultFace;
               }
               
               // 保存二维码事件
               var qrcode_download = document.getElementById("qrcode_download");
               qrcode_download.addEventListener("tap", function(){
                   plus.nativeUI.showWaiting("下载中...");
                   var tast = plus.downloader.createDownload(
                       user.qrcode,
                       {},
                       function(downloadFile, status){
                           plus.nativeUI.closeWaiting();
                           if(status == 200){
                               // 获取文件的临时路径
                               var tmpFile = downloadFile.filename;
                               // 下载文件
                               plus.gallery.save(tmpFile, function(){
                                   app.showToast("保存二维码成功", "success");
                               })
                           }else{
                               app.showToast("下载错误", "error");
                           }
                       }
                   );
                   // 启动下载任务
                   tast.start();
               })
            })
		</script>
	</body>

</html>
